<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录</title>
    <meta name="description" content="e-shop">
    <meta name="keywords" content="e-shop">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/elementui/index.css">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body class="hold-transition">

<div id="app">
    <div style="height: 60px">
        <div style="height: 8px"></div>
        <p style="color: #454545;align-content: center">欢迎使用e-shop小说阅读系统</p>
    </div>
    <el-form ref="login" :model="form" :rules="rules" label-width="80px">
        <!--
            prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
        -->
        <el-form-item label="用户名" prop="username">
            <el-col :span="21">
                <el-input v-model="form.username"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-col :span="21">
                <el-input v-model="form.password"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit()">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>

</body>
<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            form: {//分页相关模型数据
                username: "",
                password: ""
            },
            rules: {
                username: [
                    {required: true, message: '用户名不能为空', trigger: 'blur'},
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    {required: true, message: '密码不能为空', trigger: 'blur'}
                ]
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        // created() {
        //     this.findPage();//VUE对象初始化完成后调用分页查询方法，完成分页查询
        // },
        methods: {
            //编辑
            onSubmit() {
                //进行表单校验
                this.$refs['login'].validate((valid) => {
                    if (valid) {
                        //表单校验通过，可以提交数据
                        // axios.get("/user/login?" + this.form().username + "&" + this.form.password).then((res) => {
                        axios.get("/user/login?username=" + this.form.username + "&password=" + this.form.password).then((res) => {
                            if (res.data.code == 200) {
                                //弹出成功提示信息
                                this.$message({
                                    type: 'success',
                                    message: res.data.msg
                                });
                                // alert("jfkds")
                                window.location.href = "/pages/main.html";
                            } else {
                                //执行失败
                                this.$message.error(res.data.msg);
                            }
                        });
                    } else {
                        //表单校验不通过
                        this.$message.error("表单数据校验失败!");
                        return false;
                    }
                });
            },
            // 重置表单
            resetForm() {
                this.form = {};//重置数据
            },
        }
    })
</script>
<style>
    body {
        text-align: center;
        background: url("/img/boxed-bg.jpg");
    }

    #app {
        width: 400px;
        height: 260px;
        margin: 170px auto;
        background: #3c8dbc;
    }
</style>
</html>